<div style='height: 200px;'>
	<div id='tarefastatus' class='span6' style='height: 200px; border:3px solid #CCCCCC; border-radius:5px;'></div>
	<div id='pendencia' class='span6' style='height: 200px; border:3px solid #CCCCCC; border-radius:5px;'></div>
</div>
<div style='height: 200px; margin-top:25px;'>
	<div id='tarefasabertasprazo' class='span6' style='height: 200px; border:3px solid #CCCCCC; border-radius:5px;'></div>
	<div id='tarefasfinalizadasprazo' class='span6' style='height: 200px; border:3px solid #CCCCCC; border-radius:5px;'></div>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

{literal}
<script type="text/javascript">
	google.load("visualization", "1", {packages:["corechart"]});
	google.setOnLoadCallback(drawTarefaStatus);
	google.setOnLoadCallback(drawPendencias);
	google.setOnLoadCallback(drawTarefaAbertaPrazo);
	google.setOnLoadCallback(drawTarefaFechadaPrazo);
	
    function drawTarefaStatus() {
		$.getJSON(BASE_PATH+'intelihelp/relatorio/retornarTarefaJson')
		.success(function(json){
			var dados='[';
			
 			$.each(json, function(key,value)
			{
				dados = dados+"['"+key+"',"+value+"],";
			});
 			dados = dados + ']';
			dados = eval(dados);
	        
	        var data = google.visualization.arrayToDataTable(dados);
	
	        var options = {
	          title: 'Tarefa X Status'
	        };
	
	        var chart = new google.visualization.PieChart(document.getElementById('tarefastatus'));
	        chart.draw(data, options);
		});
      }

    function drawTarefaFechadaPrazo() {
		$.getJSON(BASE_PATH+'intelihelp/relatorio/retornarTarefaFinalizadaXPrazoJson')
		.success(function(json){
			var dados='[';
			
 			$.each(json, function(key,value)
			{
				dados = dados+"['"+key+"',"+value+"],";
			});
 			dados = dados + ']';
			dados = eval(dados);
	        
	        var data = google.visualization.arrayToDataTable(dados);
	
	        var options = {
	          title: 'Tarefa(s) Finalizada(s) X Prazo'
	        };
	
	        var chart = new google.visualization.PieChart(document.getElementById('tarefasfinalizadasprazo'));
	        chart.draw(data, options);
		});
      }

    function drawTarefaAbertaPrazo() {
		$.getJSON(BASE_PATH+'intelihelp/relatorio/retornarTarefaAbertaXPrazoJson')
		.success(function(json){
			var dados='[';
			
 			$.each(json, function(key,value)
			{
				dados = dados+"['"+key+"',"+value+"],";
			});
 			dados = dados + ']';
			dados = eval(dados);
	        
	        var data = google.visualization.arrayToDataTable(dados);
	
	        var options = {
	          title: 'Tarefa(s) Abertas(s) X Prazo'
	        };
	
	        var chart = new google.visualization.PieChart(document.getElementById('tarefasabertasprazo'));
	        chart.draw(data, options);
		});
      }

	function drawPendencias() {
		$.getJSON(BASE_PATH+'intelihelp/relatorio/retornarPendenciaJson')
		.success(function(json){
			var dados='[';
			
			var dados = dados + '["",';
 			$.each(json, function(key,value)
			{
				dados = dados+"'"+key+"',";
			});
			var dados = dados + '],["",';
 			$.each(json, function(key,value)
			{
				dados = dados+value+",";
			});
 			dados = dados + ']]';
			dados = eval(dados);
	        
			var wrapper = new google.visualization.ChartWrapper({
			   chartType: 'ColumnChart',
			   dataTable: dados,
			   options: {'title': 'Tarefa(s) Pendente(s)'},
			   containerId: 'pendencia'
			 });
			 wrapper.draw();
		});
      }

</script>
{/literal}